<template>
	<view>
		<scroll-view scroll-y class="page">
			  <!-- 头部logo-->
		  <view class="UCenter-bg">
		    <image :src="personalList.avatar" class="png round animation-slide-right margin-bottom-sm" mode="scaleToFill" :style="[{animationDelay: '0.1s'}]"></image>
		    <image src="https://static.jeecg.com/upload/test/wave_1595818053612.gif" mode="scaleToFill" class="gif-wave"></image>
		  </view>
		  <view class="padding flex text-center text-grey bg-white shadow-warp">
		    <view class="flex flex-sub flex-direction solid-right animation-slide-top" :style="[{animationDelay: '0.2s'}]">
		      <view class="text-xl text-orange">{{personalList.realname}}</view>
			  <view class="margin-top-sm"><text class="cuIcon-people"></text> 用户</view>
		    </view>
		    
		    <view class="flex flex-sub flex-direction animation-slide-top" :style="[{animationDelay: '0.2s'}]">
		      <view class="text-xl text-green">{{personalList.post?personalList.post:'临时用户'}}</view>
		      <view class="margin-top-sm"><text class="cuIcon-news"></text> 角色</view>
		    </view>
		  </view>
		  <!-- 列表list-->
		  <view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg radius">
<!--		    <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
		      <view class="content" >
		        <text class="cuIcon-favorfill text-yellow"></text>
		        <text class="text-grey">收藏</text>
		      </view>
		    </view>
		    <view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
		      <view class="content">
		        <text class="cuIcon-redpacket_fill text-red"></text>
		        <text class="text-grey">红包</text>
		      </view>
		    </view>
			<view class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.3s'}]" @tap="scan">
			  <view class="content">
			    <text class="cuIcon-scan text-red"></text>
			    <text class="text-grey">扫码</text>
			  </view>
			</view>-->
        <block v-if="!!token">
          <navigator class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]" hover-class="none">
            <view class="content" >
              <text class="cuIcon-share text-cyan"></text>
              <text class="text-grey">我的邀请码</text>
              <text style="float: right">{{personalList.inviteCode || ''}}</text>
            </view>
          </navigator>
          <!--<navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.4s'}]" url="/pages/user/location" hover-class="none">
            <view class="content" >
              <text class="cuIcon-location text-cyan"></text>
              <text class="text-grey">定位</text>
            </view>
          </navigator>-->
		  <navigator v-if="personalList.roleCode" class="cu-item arrow animation-slide-bottom" url="/pages/user/student" :style="[{animationDelay: '0.6s'}]">
		    <view class="content">
		      <text class="cuIcon-people text-cyan"></text>
		      <text class="text-grey" v-if="personalList.roleCode == 'ywyjs'">我的教练</text>
		      <text class="text-grey" v-else-if="personalList.roleCode == 'jiaolian'">我的学员</text>
		    </view>
		  </navigator>
		  <navigator class="cu-item arrow animation-slide-bottom" v-if="personalList.roleCode == 'ywyjs'||personalList.roleCode == 'jiaolian'" url="/pages/user/statischart" :style="[{animationDelay: '0.6s'}]">
		    <view class="content">
		      <text class="cuIcon-moneybag text-cyan"></text>
		      <text class="text-grey">统计收益</text>
		    </view>
		  </navigator>
		  <navigator class="cu-item arrow animation-slide-bottom" v-if="hytag == '0'" url="/pages/user/crown" :style="[{animationDelay: '0.6s'}]">
		    <view class="content">
		      <text class="cuIcon-crown text-cyan"></text>
		      <text class="text-grey">会员充值</text>
		    </view>
		  </navigator>
          <navigator class="cu-item arrow animation-slide-bottom" url="/pages/user/userdetail" :style="[{animationDelay: '0.6s'}]">
            <view class="content">
              <text class="cuIcon-settingsfill text-cyan"></text>
              <text class="text-grey">设置</text>
            </view>
          </navigator>
          <navigator class="cu-item arrow animation-slide-bottom" url="/pages/user/kefu" :style="[{animationDelay: '0.6s'}]">
            <view class="content">
                <text class="cuIcon-people text-cyan"></text>
                <text class="text-grey">客服</text>
            </view>
          </navigator>
          <navigator class="cu-item arrow animation-slide-bottom" :style="[{animationDelay: '0.7s'}]" url="/pages/user/userexit" hover-class="none">
            <view class="content" >
              <text class="cuIcon-exit text-cyan"></text>
              <text class="text-grey">退出</text>
            </view>
          </navigator>
        </block>
        <block v-else>
          <button open-type="getPhoneNumber" @getphonenumber="txGetPhoneNumber" v-show="!logged" class="log-btn wechat" type="primary">
          <uni-icons color="#ffffff" style="margin:10rpx;" type="weixin"></uni-icons>
            手机号快捷登录
          </button>
        </block>
		  </view>
		  <view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
	import api from '@/api/api'
  import {mapActions, mapGetters} from "vuex"
  import {getWxUserInfo} from "../../common/luch-request/wxLogin";
  import {USER_INFO} from "../../common/util/constants";

	export default {
		name: "people",
		data() {
			return {
        hytag: "1",
				personalList:{
				  avatar:'',
				  realname:'',
				  username:'',
				  post:''
				},
          hyUrl:'/authority/xcx/hy',
				  positionUrl:'/sys/position/list',
				  departUrl:'/sys/user/userDepartList',
				  userUrl:'/sys/user/queryById',
				  postUrl:'/sys/position/queryByCode',
          roleUrl: 'sys/user/queryUserRole',
        roleListUrl: 'sys/role/queryallNoByTenant',
				  id:''
			};
		},
    computed: {
      ...mapGetters(['token', 'userInfo'])
    },
		watch: {
			cur: {
				immediate: true,
				handler() {
					console.log('watch',this.cur)
					this.load()
				},
			},
		},
		methods: {
      txGetPhoneNumber(e) {
        console.log(e)
        let {detail} = e;
        if (detail && (detail.errMsg == 'getPhoneNumber:ok')) {
          let {code} = detail;
          this.onWxLogin(code)
        }
      },
      toIndex() {
        this.$Router.replaceAll({name: 'index'})
      },
      ...mapActions(["mLogin", "PhoneLogin", "ThirdLogin", "wxLogin"]),
      onWxLogin: function (code) {
        // event 获取微信手机号参数
        uni.showToast({
          title: '正在登录',
          duration: 500
        });
        getWxUserInfo().then(jsCode => {
          let wxInfo = this.$store.state.user.wxInfo || {}
          console.log(wxInfo)
          this.loading = true;
          // uni.showLoading({title: '加载中'})
          this.wxLogin({
            code,
            userInfo: wxInfo,
            ...wxInfo,
            sex: wxInfo.gender == 0 ? 1 : 2,
            username: wxInfo.nickName,
            realname: wxInfo.nickName,
            jsCode,
            password: 'admin@123'
          }).then(res => {
            const {result: data} = res.data;
            console.log(data)
            if (data.sysUser.hasOwnProperty('phone')) {
              if (data.userType) {
                uni.showModal({
                  content: '暂无权限，请联系管理人员。',
                  confirmText: '确定',
                  showCancel: false,
                  success: (r) => {
                  }
                });
              } else {
                //有权限可以直接登录
                // this.$store.commit('user/set_userInfo', {...data.sysUser});
                // this.$store.dispatch('user/set_userInfo', {...data.sysUser, token: data.token})
                console.log(this.userInfo)
                // this.$_jumpTo(data.userType)
                // #ifdef APP-PLUS
                this.saveClientId()
                // #endif
                // #ifndef APP-PLUS
                this.$tip.success('登录成功!')
                this.$Router.replaceAll({name: 'index'})
                // #endif
              }
            } else {
              //需要获取手机号
              this.getPhoneQuery = res.data
              // StorageToken.set(data.token)
              this.showModal = true
            }
          }).finally(() => {
            // uni.hideLoading()
            this.loading = false;
          })
        }).catch(err => {
          console.log(err)
        })
      },
			scan(){
				 console.log("进来了")
				// #ifndef H5
				uni.scanCode({
				    success: function (res) {
						console.log('条码res：' + res);
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});
				// #endif
				// #ifdef H5
				this.$tip.alert("暂不支持")
				// #endif
			},
			load(){
        console.log(this.userInfo)
				if(!this.token){
					return;
				}
        //会员按钮显示
        this.$http.get(this.hyUrl, {}).then(res => {
          console.log(res)
          this.hytag = res?.data?.data || "1"
        })

				this.$http.get(this.userUrl,{params:{id:this.userInfo.id}}).then(res=>{
					console.log("res",res)
					 if (res.data.success) {
						let perArr = res.data.result
				        let avatar=(perArr.avatar && perArr.avatar.length > 0)? api.getFileAccessHttpUrl(perArr.avatar):'/static/avatar_boy.png'
						this.personalList.avatar =avatar
						this.personalList.realname = perArr.realname
						this.personalList.username = perArr.username
						this.personalList.depart = perArr.departIds
             this.personalList.inviteCode = perArr.inviteCode
					    // this.getpost(perArr.post)
             this.getRoles(perArr.id);
					}
				}).catch(err => {
					console.log(err);
				});
				
			},
      getRoles(userId) {
        if(!userId||userId.length==0){
          this.personalList.post='临时用户'
          return false;
        }
        this.$http.get(this.roleUrl,{params:{userid:userId}}).then(outRes=>{
          console.log("postUrl",outRes)
          if (outRes.data.success) {
            this.$http.get(this.roleListUrl).then(res=>{
              console.log("postUrl",res)
              if (res.data.success) {
                let {result} = res.data;
                this.personalList.post=(result.find(f => f.id === outRes.data.result[0]) || {}).roleName;
                this.personalList.roleCode=(result.find(f => f.id === outRes.data.result[0]) || {}).roleCode;
              }
            }).catch(err => {
              console.log(err);
            });
            this.personalList.post=res.data.result.name
          }
        }).catch(err => {
          console.log(err);
        });
      },
			getpost(code){
				if(!code||code.length==0){
					this.personalList.post='临时用户'
					return false;
				}
				this.$http.get(this.postUrl,{params:{code:code}}).then(res=>{
					console.log("postUrl",res)
					 if (res.data.success) {
						this.personalList.post=res.data.result.name
					}
				}).catch(err => {
					console.log(err);
				});
				
			}
		}
	}
</script>

<style>
.UCenter-bg {
	/* #ifdef MP-WEIXIN */
	background-image: url('https://static.jeecg.com/upload/test/blue_1595818030310.png');
	/* #endif */
	/* #ifndef MP-WEIXIN */
	background-image: url('/static/blue.png');
	/* #endif */
  background-size: cover;
  height: 400rpx;
  display: flex;
  justify-content: center;
  padding-top: 40rpx;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 300;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.UCenter-bg text {
  opacity: 0.8;
}

.UCenter-bg image {
  width: 200rpx;
  height: 200rpx;
}

.UCenter-bg .gif-wave{
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}

map,.mapBox{
  left: 0;
  z-index: 99;
  mix-blend-mode: screen;  
  height: 100rpx;   
}

map,.mapBox{
  width: 750rpx;
  height: 300rpx;
}
</style>
